<template>
  <div class="mask" v-show="isShowShare" @touchmove.prevent>
    <div class="mask-inner">
      <div class="share-close" @click="handleCloseShare"></div>
      <div ref="sharePic" class="share-pic share1" :class="{share2: completeRun}">
        <span v-if="!completeRun" class="remainValue">{{ myRank.contentRemainValue | addKM}}</span>
        <span v-if="!completeRun" class="completeValue">{{ myRank.contentCompleteValue | addKM}}</span>
        <span v-if="!completeRun" class="targetValue">{{ myRank.countCompleteValue | addKM}}</span>
      </div>
      <div ref="aaa" class="share-btn" @click="handleShareBtn">分享</div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import { base64PicToAPP } from 'common/base.js'
export default {
  name: 'Share',
  props: {
    isShowShare: Boolean,
    myRank: Object
  },
  data () {
    return {
      isShow: this.isShowShare,
      data64: '1'
    }
  },
  computed: {
    completeRun () {
      let contentValue = this.myRank.contentCompleteValue
      let countValue = this.myRank.countCompleteValue
      if (contentValue && contentValue >= countValue) {
        return true
      }
      return false
    }
  },
  filters: {
    addKM (val) {
      return val / 1000 + ' KM'
    }
  },
  methods: {
    handleCloseShare () {
      this.$emit('closeShare')
    },
    handleShareBtn () {
      html2canvas(this.$refs.sharePic).then(canvas => {
        this.data64 = canvas.toDataURL('image/png')
        // console.log(this.data64)
        base64PicToAPP(this.data64)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  $closeSize = .8rem
  .mask
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    background-color rgba(0, 0, 0, .5)
    .mask-inner
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      width 82.6%
      height 115.4vw
      margin auto
      // background-color red
      .share-close
        position absolute
        right -($closeSize / 2)
        top -($closeSize / 2)
        z-index 2
        width $closeSize
        height $closeSize
        background url('~img/x.png')no-repeat center/60%
      .share-pic
        position relative
        width 100%
        height 98vw
        // width 6.2rem
        // height 7.4rem
        color #d51f1a
        background-color transparent
        // background-size 100%
        background-size 100% 100%
        background-repeat no-repeat
      .share1
        background-image url('~img/share1.png')
      .share2
        background-image url('~img/share2.png')
      span
        position absolute
        font-size .4rem
      .remainValue
        top 18vw
        left 52vw
      .completeValue
        top 27.2vw
        left 45vw
      .targetValue
        top 36.5vw
        left 49vw
      .share-btn
        width 3rem
        height $height
        line-height $height
        margin .2rem auto 0
        text-align center
        color #fff
        background-color $bgColor
        border-radius(.44rem)
</style>
